<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
    <style>
        .style1 {
            margin: 15px 0;
            background: #0bb20c;
            color: white;
            padding: 15px;
        }

        .main {
            padding: 10px;
        }
    </style>
</head>


<body>
    <div id="app">
        <div class="style1">
            <router-view></router-view>
        </div>

        <div class="container">
            <div class="style2">
                <router-view name="sidebar"></router-view>
            </div>
            <div class="main">
                <router-view name="main"></router-view>
            </div>
        </div>
    </div>

    <template id="sidebar">
        <div class="sidebar">
            <ul>
                <router-link v-for="(item,index) in menu" :key="index" :to="item.url" tag="li">
                    {{item.name}}
                </router-link>
            </ul>
        </div>
    </template>

    <template id="main">
        <router-view></router-view>
    </template>

    <template id="form">
        <div>
            <form>
                <div>
                    <label for="email">邮箱：</label>
                    <input type="email" id="email" placeholder="请输入电子邮件" v-model="email">
                </div>
                <div>
                    <label for="pass">密码：</label>
                    <input type="password" id="pass" placeholder="请输入密码" v-model="password">
                </div>
                <button type="submit" @click="submit">提交</button>
            </form>
        </div>
    </template>

    <template id="info">
        <div class="card" style="margin-top: 5px;">
            <div class="card-header">
                输入的信息
            </div>
            <div class="car-body">
                <blockquote class="blockquote mb-0">
                    <p>邮箱：{{$route.params.email}}</p>
                    <p>密码：{{$route.params.password}}</p>
                </blockquote>
            </div>
        </div>
    </template>

    <script>
        const header = {
            template: '<div class="header">头部</div>'
        }
        const main = {
            template: '#main'
        }
        const form = {
            template: '#form',
            data() {
                return {
                    email: '',
                    password: ''
                }
            },
            methods: {
                submit() {
                    console.log(233);
                    this.$router.push({
                        name: 'info',
                        params: {
                            email: this.email,
                            password: this.password
                        }
                    })
                }
            },
        }

        const info = { template: '#info' }
        const sidebar = {
            template: '#sidebar',
            data() {
                return {
                    menu: [
                        {
                            name: 'form',
                            url: '/form'
                        },
                        {
                            name: 'info',
                            url: '/info'
                        }
                    ]
                }
            },
        }


        const router = new VueRouter({
            routes: [
                {
                    path: '/',
                    components: {
                        default: header,
                        sidebar: sidebar,
                        main: main
                    },
                    children: [
                        {
                            path: '',
                            redirect: 'form'
                        },
                        {
                            path: 'form',
                            component: form
                        },
                        {
                            path: 'info/:email/:password',
                            name: 'info',
                            component: info
                        },
                    ]
                }
            ]
        })
        const app = new Vue({
            el: "#app",
            data() {
                return {

                }
            },
            router: router
        })
    </script>
</body>

</html>
